<!--
  author: tangcheng_cd
  create by: 2020/6/18
  descr:
-->
<template>
  <div class="main-header">
    <div class="left-c">
      <!-- <img class="logo" src="@img/login/logo.png"> -->
      <span>即席分析数据分析平台</span>
    </div>
    <div class="right-c">
      <el-popover placement="bottom" width="200" trigger="hover">
        <el-badge :value="msgCount" slot="reference">
          <i class="el-icon-bell" size="mini" @click="turnOtherPage" />
        </el-badge>
        <ul class="open-panel" v-if="mess.length" v-infinite-scroll="load">
          <li class="oper-item" v-for="(o, i) in mess" :key="i" @click.prevent="planOne(o)">您有{{ o.approvalType }}{{ o.msgCount }}条需要进行审批</li>
        </ul>
        <div class="open-panel" v-else>暂无更多信息</div>
      </el-popover>
      <el-popover placement="bottom" width="100" trigger="hover" popper-class="popper-user">
        <div class="user-info" slot="reference">
          <span style="color: #000000" @click.prevent="toggleUserOperPanelShow">你好，{{ user.name }}</span>
          <div class="oper-button user-buttom" @click.prevent="toggleUserOperPanelShow">
              <img src="@img/indexPage/icon-default-user.svg" class="logo-img">
          </div>
        </div>
        <ul class="action-panel">
          <li @click.prevent="changePersonInfo">个人信息</li>
          <li @click.prevent="changePersonPassword">修改密码</li>
          <li @click.prevent="logOut">退出</li>
        </ul>
      </el-popover>
    </div>
    <!--审批结束后,进行页面铃铛消息提示的刷新调用-->
    <!-- <agree-model-form @turnOtherPage="turnOtherPage"></agree-model-form> -->
    <!-- <dis-agree-model-form @turnOtherPage="turnOtherPage"></dis-agree-model-form> -->
    <!-- <rufuse-model-form @turnOtherPage="turnOtherPage"></rufuse-model-form> -->
    <!-- <PosPlanApproval @turnOtherPage="turnOtherPage"></PosPlanApproval> -->
  </div>
</template>

<script type="text/ecmascript-6">
import { nextPage } from '@asst/js/index'
import {
    GET_USER_INFO,
    QUERY_MSG_COUNT
} from '@api/url'
import ajax from '@api/ajax'
import { EventBus } from '../../utils/eventBus'

export default {
    name: 'main-stage-one-header',
    components: {
    },
    data: () => ({
        msgCount: '0', // 标记信息获取的总数
        activeIndex: '1',
        userOperPanelShow: false,
        user: {},
        openItem: false,
        mess: [],
        // mess: [{approvalType: '111', msgCount: 1, goToUrl: 'IfScalePlanApproval'}, {approvalType: '222', msgCount: 2}],
        hoverCard: false,
        queryParam: {
            // uofPlanFlag: '常规新增计划'
        }
    }),
    // 计算属性进行监测
    created() {
        this.showUserInfo()
        this.turnOtherPage()
    },
    mounted() {
        // EventBus.$on("aMsg", (msg) => {
        //     // A发送来的消息
        //     this.mess = msg.mess;
        //     this.msgCount = msg.msgCount
        // });
        EventBus.$on('turnOtherPage', (msg) => {
            // A发送来的消息
            this.mess = msg.mess
            this.msgCount = msg.msgCount
        })
    },
    methods: {
        // 点击跳转到审批页面
        turnOtherPage() {
            // 传递参数部门编号参数
            // 1. 获取当前用户部门id
            ajax.post(GET_USER_INFO).then(res => {
                var departInfo = {
                    uofPlanItlNo: res.data.depart
                }
                // 获得资金计划(部门,分管领导,总经理)和投融资计划待审批的总条数
                ajax.post(QUERY_MSG_COUNT, departInfo).then(data => {
                    let sum = 0
                    data.data.forEach(item => {
                        sum += item.msgCount
                    })
                    this.msgCount = sum
                    // 获取每条详细信息并可以进行点击
                    this.mess = data.data
                }).catch(err => {
                })
            })
            // 页面跳转的地址
            // this.$router.push('')
        },
        load() {
            this.count += 2
        },
        mouseover() {
            this.openItem = true
        },
        mouseLeave() {
            let that = this
            setTimeout(() => {
                if (!that.hoverCard) {
                    that.openItem = false
                }
            }, 1000)
        },
        // 光标移动到铃铛后,触发动下拉菜单事件
        mouseoverItem() {
            this.hoverCard = true
            // ajax.post('adhoc/caAcctEwInfo/list.do', this.queryParam).then(res => {
            //     this.mess = res.data
            //     this.$message.success('''')
            // }).catch(err => {
            //     console.err(err, '查询失败')
            // })
        },
        mouseLeaveItem() {
            this.hoverCard = false
            this.openItem = false
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath)
        },
        // ,
        // // 点击铃铛后,页面跳转到审批页面
        // overTurn() {
        //     this.$router.push('/home/PosplancreateList')
        //     this.openItem = !this.openItem
        // }
        // ,
        toggleUserOperPanelShow() {
            this.userOperPanelShow = !this.userOperPanelShow
        },
        changePersonInfo() {
            nextPage('/home/updateUserInfo')
            this.userOperPanelShow = false
        },
        changePersonPassword() {
            nextPage('/home/updatePwd')
            this.userOperPanelShow = false
        },
        enterSystemList() {
            nextPage('/index')
        },
        showUserInfo() {
            ajax.post(GET_USER_INFO).then(res => {
                this.user = res.data || []
            }).catch(error => {
                console.error('查询报错', error)
            })
        },
        logOut() {
          // TODO:: tangcheng 这里从存储中拿到当前用户编号进行登出操作
          this.$store.dispatch('system/logout').then(() => {
            nextPage('/')
          }).catch(() => {
            console.error('用户注销发生错误！', e)
          }).finally(el => {
              nextPage('/')
          })
        },
        // 新增计划
        planOne(item) {
            nextPage(item.goToUrl)
        }
    }

}
</script>

<style lang="less" scoped>
.main-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 30px;
  .left-c{
    font-size: 16px;
  }
  .right-c{
    display: flex;
    align-items: center;
    height: 100%;
    .el-badge{
      cursor: pointer;
      margin-right: 40px;
      .el-icon-bell{
        font-size: 20px;
      }
    }
    .user-info{
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
}
.popper-user{
  .action-panel{
    margin: -12px;
    li{
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      &:hover{
        background: #f04959;
        color: #FFF;
      }
    }
  }
}
</style>

<style lang="stylus" rel="stylesheet/stylus" scoped>
// .main-stage-header
//     background-color #FFFFFF
//     z-index 2

//     .main-stage-header-content
//         height 45px
//         overflow hidden
//         position relative
//         box-shadow 0 2px 4px 0 #e0dddd

//     .system-logo
//         margin-bottom 0px
//         margin-left 16px
//         height 39px
//         displa-y flex
//         align-items center

//         .logo-img
//             display inline-block
//             width 175px
//             height 32px
//             vertical-align sub

//         .split-line
//             display inline-block
//             background-color #CACED2
//             width 2px
//             height 46px
//             margin-left 14px
//             vertical-align bottom

//         .system-title
//             display inline-block
//             font-size 16px
//             color #191a1c
//             line-height 21px
//             margin-left 10px
//             margin-bottom 10px
//             vertical-align bottom

//     .right-container
//         position absolute
//         top 6px
//         right 20px
//         display flex
//         align-items center

//         .oper-button
//             display inline-block
//             cursor pointer

//             img
//                 display block

//         .search-button
//         .home-button
//             width 20px
//             height 20px
//             margin-right 20px
//             margin-top 6px

//         .user-buttom
//             width 32px
//             height 32px
//             margin-right 10px

//         .arrow-down-button
//             width 12px
//             height 12px
//             margin-left 4px

//         .user-info
//             //margin-top 11px
//             //display inline-block
//             //margin-right 5px
//             position relative

//         .el-button--text
//             color black

//     .user-info-oper-panel
//         position absolute
//         top 51px
//         right 5px
//         width 250px
//         background-color #FFF
//         z-index 222
//         display block
//         padding 10px 14px
//         box-shadow 0 2px 4px 2px #e0dddd

//         .oper-item
//             padding-left 7px
//             height 35px
//             line-height 35px
//             width 100%
//             cursor pointer

//             &:hover
//                 border-bottom 1px solid #d5d5e3

// .el-icon-bell {
//     font-size: 25px
// }

// .is-msg {
//     font-size: 25px
//     animation: el-icon-bell ease-in-out .2s infinite alternate;
// }

// @keyframes el-icon-bell {
//     from {
//         transform: translateX(10px) rotate(0deg);
//     }
//     to {
//         transform: translateY(0px) rotate(0deg);
//     }

// }

// .el-icon-bell:hover {
//     color: green
// }

// .right-container {
//     display: block;
// }

// .el-date-select {
//     display: flex;
//     //flex-direction: row;
//     //justify-content: center;
//     justify-content space-between
//     align-items: center;
//     position: relative
// }

// .openItem {
//     background-color: #ffffff
//     position: absolute
//     height: 100px
// }

// .user-info {
//     display: flex
//     align-items center
//     justify-content: center
// }

// .select-content {
//     position: relative
//     cursor:pointer
// }

// .allPlan {
//     //background-color :red
//     position: absolute
//     width: 150px
//     display: inline-block
// }

// .first-item {
//     width: 200px
//     padding: 10px
//     text-decoration: none
//     //line-height :30px
// }

// .userName {
//     margin-right: 10px
//     margin-left: 20px
//     cursor: pointer
// }

// .user-info-oper-item {
//     position: absolute
//     top: 45px
//     right: 35px
//     width: 200px
//     z-index: 222
//     display: block
//     padding: 10px 14px
//     //box-shadow :0 2px 4px 2px #e0dddd
//     //.oper-item
//     //    padding-left 7px
//     //    height 35px
//     //    line-height 35px
//     //    width 100%
//     //    cursor pointer
//     //    &:hover
//     //        border-bottom 1px solid #d5d5e3
// }

// a {
//     text-decoration: none
// }

//.el-scrollbar{
//    opacity: 1;
//    height:200px;
//    width:200px;
//    overflow-x: hidden;
//}
</style>
